<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title> - 空白页</title>
    <meta name="keywords" content="">
    <meta name="description" content="">

    <link rel="shortcut icon" href="favicon.ico"> <link href="css/bootstrap.min.css?v=3.3.6" rel="stylesheet">
    <link href="css/font-awesome.css?v=4.4.0" rel="stylesheet">
    <link href="css/animate.css" rel="stylesheet">
    <link href="css/style.css?v=4.1.0" rel="stylesheet">

    <!--- 引入的phpMyAdmin样式 -->
    <link href="css/print.css" rel="stylesheet">
    <link href="css/jquery-ui-1.8.16.custom.css" rel="stylesheet">
    <link href="css/plugins/iCheck/custom.css" rel="stylesheet">

    <!-- 分页 -->
    <link rel="stylesheet" href="css/paging.css">
</head>

<body class="gray-bg">
    <div class="col-sm-13">
        <div class="ibox float-e-margins">
            <div class="ibox-title">
                <h5>数据表列表</h5>
                <div class="ibox-tools">
                    <a class="collapse-link"><i class="fa fa-chevron-up"></i></a>
                    <a class="dropdown-toggle" data-toggle="dropdown" href="form_basic.html#">
                    <i class="fa fa-wrench"></i></a>
                    <a class="close-link"><i class="fa fa-times"></i></a>
                </div>
            </div>
            <div class="ibox-content">
                <a href="?r=tables/create_table" id="user-index" class="btn btn-info dropdown-toggle J_menuItem">创建表</a>
                <!-- <a id="user-index" class="btn btn-info dropdown-toggle J_menuItem table_object">开启事物</a> -->
                <a href="" id="user-index" class="btn btn-info dropdown-toggle J_menuItem">刷新</a>
                <a href="?r=dbs/show_db" id="user-index" class="btn btn-info dropdown-toggle J_menuItem">返回</a>
                <a id="user-index" class="btn btn-info dropdown-toggle dbname-cha">新建查询</a>
            </div>
        </div>
    </div>
<style type="text/css">
    #dbname tr td i{
        cursor: pointer;
        margin: 5px;
    }
    body {
    font-family:Arial, Helvetica, sans-serif;
    font-size:12px;
    margin:0;
    }
    #fullbg {
    background-color:gray;
    left:0;
    opacity:0.5;
    position:absolute;
    top:0;
    z-index:3;
    filter:alpha(opacity=50);
    -moz-opacity:0.5;
    -khtml-opacity:0.5;
    }
    #dialog {
    background-color:#fff;
    border:5px solid rgba(0,0,0, 0.4);
    height:400px;
    left:30%;
    margin:-200px 0 0 -200px;
    padding:1px;
    position:fixed !important; /* 浮动对话框 */
    position:absolute;
    top:50%;
    width:800px;
    z-index:5;
    border-radius:5px;
    display:none;
    }
    #dialog p {
    margin:0 0 12px;
    height:24px;
    line-height:24px;
    background:#CCCCCC;
    }
    #dialog p.close {
    text-align:right;
    padding-right:10px;
    }
    #dialog p.close a {
    color:red;
    text-decoration:none;
    } 
    .content{
        width: 780px;
        height: 170px;
        border: 1px solid red;
        overflow:scroll; 
    }
</style>
<div class="ibox-content">
    <table class="table">
        <thead>
            <tr>
                <th width="25"></th>
                <th width="120">表名称</th>
                <th width="80">表注释</th>
                <th width="80">引擎</th>
                <th width="120">字符类型</th>
                <th width="120">操作</th>
            </tr>
        </thead>
        <tbody id="dbname">
        <?php foreach($table as $key => $val): ?>
            <tr>
                <td><input type="checkbox" value="" name=""></td>
                <td class="text-l"><?php echo $val['TABLE_NAME']?></td>
                <td><?php echo $val['TABLE_COMMENT']?></td>
                <td><?php echo $val['ENGINE']?></td>
                <td><?php echo $val['TABLE_COLLATION']?></td>
                <td>
                    <i class="glyphicon glyphicon-trash tablenames" data-tablenames="<?= $val['TABLE_NAME'];?>"></i>
                    <a href="?r=tables/show_table&table=<?=$val['TABLE_NAME']?>"><i class="glyphicon glyphicon-list"></i></a>
                    <span style="font-size: 14px">数据(<?=$val['sum']?>)条</span>

                </td>
            </tr>
        <?php endforeach;?>
        </tbody>
    </table>
    <center>
    <a href="?r=index/tablenames&at_dbname=<?=$at_dbname?>&p=1" id="user-index" class="btn btn-info dropdown-toggle J_menuItem">首页</a>
    <a href="?r=index/tablenames&at_dbname=<?=$at_dbname?>&p=<?=$shang?>" id="user-index" class="btn btn-info dropdown-toggle J_menuItem">上一页</a>
    <a href="?r=index/tablenames&at_dbname=<?=$at_dbname?>&p=<?=$xia?>" id="user-index" class="btn btn-info dropdown-toggle J_menuItem">下一页</a>
    <a href="?r=index/tablenames&at_dbname=<?=$at_dbname?>&p=<?=$ye_shu?>" id="user-index" class="btn btn-info dropdown-toggle J_menuItem">尾页</a>
    <span style="font-size: 18px">第<?=$p?>页/共<?=$ye_shu?>页</span>
    </center>
    <!-- <div class="box" id="box"></div> -->
</div>
<!-- 遮罩层 -->
<div id="main">
    <div id="fullbg"></div>
    <div id="dialog">
        <p class="close"><a href="javascript:void(0);" onclick="closeBg();">关闭</a></p>
        <div style="margin-left: 10px;">
            <br>查询sql<br><br>
                <textarea id="dbname-sql" cols="145" rows="5"></textarea><br><br>
                <a  href="javascript:void(0)" class="dbname-xun" title="查询">查询</a>
        </div>
        <div class="content">
            
        </div>
    </div>
</div>
    <!-- 全局js -->
    <script src="js/jquery.min.js?v=2.1.4"></script>
    <script src="js/bootstrap.min.js?v=3.3.6"></script>
    <!-- 自定义js -->
    <script src="js/plugins/iCheck/icheck.min.js"></script>
    <script src="js/demo/peity-demo.js"></script>
    <!-- Peity -->
    <script src="js/plugins/peity/jquery.peity.min.js"></script>
    <!-- 分页 -->
    <script src="js/jquery-1.11.1.min.js"></script>
    <script src="js/paging.js"></script>
</body>
</html>
<script type="text/javascript">
    $('.dbname-cha').click(function(){
        var bh = $("body").height();
        var bw = $("body").width();
        $("#fullbg").css({
            height:bh,
            width:bw,
            display:"block"
        });
        $("#dialog").show();
        $('.dbname-xun').click(function(){
            var sql = $("#dbname-sql").val();
            var _this = $('.content');
            _this.empty();
            $.ajax({
                type:'post',
                url:'?r=dbs/tablesql',
                data:{'sql':sql},
                success:function(mas){
                    _this.html(mas);
                }
            })
        })
    })
    //关闭灰色 jQuery 遮罩
    function closeBg(){
        $("#fullbg,#dialog").hide();
    }
    //删除表
    $(".tablenames").click(function(){
        var tablenames = $(this).data("tablenames"); //要删除的数据表名称
        if(confirm("确认要删除"+tablenames+"表吗?")){
            var _this = $(this);
            $.ajax({
                type: "post",
                url: "?r=tables/del_table",
                data: {'tablenames':tablenames},
                dataType: "json",
                success:function(msg){
                    if(msg === '1'){
                        _this.parent().parent().remove();
                    }
                }
            });
        }
    })
    function checkSubmit(){
        var dbname_u = document.getElementById("dbname_u").value;
        var charset_u = document.getElementById("charset_u").value;
        if(dbname_u === '' || charset_u === '0'){
            alert('请将必填的数据填写完整');
            return false;
        }else{
            return true;
        }
    }
</script>